<template>
	<div class="banner">
		<!-- 主界面 -->
		<div class="main">
			<!-- 头部 -->
			<div class="banner-top">
				<!-- 城市切换 -->
				<div class="city" @click="btn()">
					<label>
						{{cityName}}
					</label>
					<i class="iconfont">&#xe61c;</i>
				</div>
				<form class="search">
					<i class="iconfont">&#xe617;</i>
					<input type="text" placeholder="国内秋色盘点大全" />
				</form>
			</div>
			<ul class="resou">
				<li  v-for="item in list " :key="item.id">
					<router-link :to="item.url">{{item.name}}</router-link>
				</li>
			</ul>
	
			<div class="swiper banner-swiper">
				<ul class="swiper-wrapper">
					<li class="swiper-slide" v-for="item in imgURL" :key="item.id">
						<img  :src="item.img"/>
					</li>
				</ul>
				<div class="swiper-pagination"></div>
				<!--分页器。如果放置在swiper外面，需要自定义样式。-->
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	
	export default{
		name:'Banner',
		data(){
			return{
				imgURL:[
					{id:1,img:require('@/assets/img/1.jpg')},
					{id:2,img:require('@/assets/img/2.jpg')},
					{id:3,img:require('@/assets/img/3.jpg')},
					{id:4,img:require('@/assets/img/4.jpg')},
					{id:5,img:require('@/assets/img/5.jpg')},
					{id:6,img:require('@/assets/img/6.jpg')},
					{id:7,img:require('@/assets/img/7.jpg')},
					{id:8,img:require('@/assets/img/8.jpg')}
				],
				list:[
					{id:1,url:'/',name:'热搜'},
					{id:2,url:'/',name:'赏银杏'},
					{id:3,url:'/',name:'赏枫叶'},
					{id:4,url:'/',name:'秋日骑行'},
					{id:5,url:'/',name:'温泉滑雪'}
				]
			}
		},
		methods:{
			btn(){
				this.$router.push('/city')
			}
		},
		computed:{
					//接受state内部的cityName变量
					...mapState(['cityName'])
		},
		setup() {
			onMounted(() => {
				new Swiper('.banner-swiper', {
					//循环播放
					loop: true,
					//设置分页器效果
					pagination: {
						el: '.swiper-pagination'
					},
					//设置播放项：时间，不停止，手指经过不暂停自动
					autoplay: {
						deplay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: false
					}
				})
			})
		}
	}
</script>

<style scoped>
	.main{
		width:100% ;
		height: 6.25rem;
		background-color: #ffdd40;
		margin-bottom: 1.3rem;
	}
	.banner-top{
		display: flex;
		padding-top: 10px;
		padding-right: 10px;
	}
	.banner-top label{
		font-size: 0.425rem;
		font-weight: bold;
		
	}
	.banner-top .city {
		display: flex;
		color: black;
		font-size: 0.3rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;
	}
	.banner-top .city i {
		vertical-align: middle;
		padding-left: 0.1rem;
		font-weight: bold;
	}
	.banner-top .search {
		flex: 1;
		width: 80%;
		background-color: white;
		border-radius: 0.3rem;
		overflow: hidden;
		line-height: 0.8rem;
	}
	a{
		text-decoration: none;
		color: black;
	}
	.resou{
		text-align: center;
	}
	.resou li:first-child{
		margin-left: 0.3rem;
		background-color: #ffdd40;
	}
	.resou li{
		float: left;
		text-align: center;
		border-radius: 0.3125rem;
		width: 1.675rem;
		margin: 0.125rem;
		height: 0.5rem;
		line-height: 0.5rem;
		background-color: #ffeea0;
		margin-bottom: 0.3rem;
		margin-top: 0.3rem;
	}
	.banner-top .search i {
		height: 100%;
		display: inline-block;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}
	
	.banner-top .search input {
		border: none;
		width: 80%;
		line-height: 0.7rem;
		text-indent: 1em;
	}
	/* 轮播区域的样式 */
	.banner-swiper {
		width: 95%;
		height: 5.6rem;
		border-radius: 0.3125rem;
	}
	
	.banner-swiper img {
		width: 100%;
		height: 100%;
	}
</style>
